// 导入React核心库及状态管理钩子
import React, { useState, useEffect } from "react";
// 导入组件样式文件
import './Selection.css'
// 导入自定义图片翻转组件（注释：当前注释中暂时保留原注释格式，根据实际项目可能需要调整路径）
// import SearchBox from "@/components/SearchBox";
import ImageFlip from "../../../components/ImageFlip/ImageFlip";

// 定义"作品选择"页面组件
function Selection() {
  // 状态：存储图片URL数组（初始为undefined，表示未加载）
  const [images, setImages] = useState<string[] | undefined>();
  // 状态：控制加载状态（true表示加载中，false表示加载完成）
  const [loading, setLoading] = useState(true);

  // 副作用钩子：组件挂载时加载图片数据（仅执行一次）
  useEffect(() => {
    // 定义异步数据加载函数
    const loadData = async () => {
      try {
        // 模拟网络请求延迟（1500ms）
        await new Promise((resolve) => setTimeout(resolve, 1500));

        // 模拟图片数据（实际项目中应替换为真实API调用，如axios请求）
        const mockImages = [
          "https://picsum.photos/600/400?random=1",
          "https://picsum.photos/600/400?random=2",
          "https://picsum.photos/600/400?random=3",
          "https://picsum.photos/600/400?random=4",
          "https://picsum.photos/600/400?random=5",
          "https://picsum.photos/600/400?random=6",
          "https://picsum.photos/600/400?random=7",
          "https://picsum.photos/600/400?random=8",
        ];

        // 更新图片数据状态
        setImages(mockImages);
      } catch (error) {
        // 错误处理：打印错误日志并设置空数组（避免页面崩溃）
        console.error("加载图片失败:", error);
        setImages([]);
      } finally {
        // 无论成功/失败，最终关闭加载状态
        setLoading(false);
      }
    };

    // 执行数据加载函数
    loadData();
  }, []); // 依赖项为空数组，表示仅在组件挂载时执行

  // 翻页事件处理函数（注释：当前仅打印日志，实际项目中可扩展为加载更多数据）
  const handlePageChange = (page: number) => {
    console.log(`翻页至: 第 ${page + 1} 页`);
  };

  // 组件渲染返回值
  return (
    // 页面根容器（使用selection-root类名关联CSS样式）
    <div className="selection-root">
      {/* 顶部区域容器（注释：当前注释中暂时保留原注释，实际可放置轮播图等功能） */}
      <div className="top-selection">
        {/* <Carousels /> */}
      </div>

      {/* 主内容容器（包含网格布局和图片展示） */}
      <div className="page-container">
        {/* 设计作品网格布局容器 */}
        <div className="design-grid">
          {/* 多图展示区域（注释：当前为演示结构，实际可根据需求调整子项数量） */}
          <div className="design-item">
            {/* 图片容器1（使用ImageFlip组件实现翻转效果） */}
            <div className="image-wrapper">
              <ImageFlip
                images={images}       // 传入图片数组（控制翻转内容）
                loading={loading}     // 传入加载状态（控制加载提示）
                onPageChange={handlePageChange} // 传入翻页回调（控制翻页逻辑）
              />
            </div>

            {/* 长图滚动容器（注释：用于展示高度大于容器的长图） */}
            <div className="image-wrapper1">
              <div className="image-sequence">
                {/* 长图1（尺寸600x1200，模拟需要滚动查看的长图） */}
                <img
                  src="https://picsum.photos/600/1200?random=1"
                  alt="scrollable image 1"
                  className="scrollable-image" // 关联滚动样式类
                />
                {/* 长图2 */}
                <img
                  src="https://picsum.photos/600/1200?random=2"
                  alt="scrollable image 2"
                  className="scrollable-image"
                />
                {/* 长图3 */}
                <img
                  src="https://picsum.photos/600/1200?random=3"
                  alt="scrollable image 3"
                  className="scrollable-image"
                />
              </div>
            </div>

            {/* 图片容器2（重复使用ImageFlip组件） */}
            <div className="image-wrapper">
              <ImageFlip
                images={images}
                loading={loading}
                onPageChange={handlePageChange}
              />
            </div>

            {/* 图片容器3 */}
            <div className="image-wrapper">
              <ImageFlip
                images={images}
                loading={loading}
                onPageChange={handlePageChange}
              />
            </div>

            {/* 图片容器4 */}
            <div className="image-wrapper">
              <ImageFlip
                images={images}
                loading={loading}
                onPageChange={handlePageChange}
              />
            </div>

            {/* 图片容器5 */}
            <div className="image-wrapper">
              <ImageFlip
                images={images}
                loading={loading}
                onPageChange={handlePageChange}
              />
            </div>
          </div>
        </div>

        {/* 无图片提示（当图片数组为空且非加载状态时显示） */}
        {images && images.length === 0 && !loading && (
          <div className="no-images-message">
            没有找到设计作品，请上传或创建新的设计
          </div>
        )}
      </div>
    </div>
  );
}

// 导出组件供其他文件使用
export default Selection;